<template >
    <div>
        <h1>待办事项</h1>

        <el-container>
            <el-header><SomHeader @add="addHandle" >Header</SomHeader></el-header>
            <el-main><SomMain :list="list" @finish="changeDad" @cancer="cancerDad" @del="delDad">Main</SomMain></el-main>
            <el-footer><SomFooter :list="list" @show="show">Footer</SomFooter></el-footer>
        </el-container>

    </div>
</template>


<script>
import SomHeader from '../components/ToDo/SomHeader'
import SomFooter from '../components/ToDo/SomFooter'
import SomMain from '../components/ToDo/SomMain'

export default {
    components:{
        SomHeader,
        SomFooter,
        SomMain,
    },
    data(){
        return{
            list:[{id:'001',content:'唱歌',state:false,startDate:'2024-08-10',finishDate:''},
                  {id:'002',content:'跳舞',state:false,startDate:'2024-09-10',finishDate:''},
                  {id:'003',content:'Rap',state:false,startDate:'2024-10-10',finishDate:''},
                  {id:'004',content:'打篮球',state:false,startDate:'2024-11-10',finishDate:''},
            ],
            now:new Date(),
            copyList:[],
        }
    },
    created(){
        this.copyList =this.list.slice()
    },
    methods:{
        addHandle(val){
            this.list.push({
                id:+new Date(),
                content:val,
                state:false,
                startDate:this.formatDate,
                finishDate:'',
            })
            this.copyList =this.list.slice()
        },
        changeDad(i){
            this.list[i].finishDate = this.formatDate,
            this.copyList =this.list.slice()
        },
        cancerDad(i){
            this.list1[i].state=false,
            this.copyList =this.list.slice()
        },
        delDad(i){
            this.list.splice(i,1)//删除几行,
            this.copyList =this.list.slice()
        },
        show(flag){
            if(flag== 'clear'){
                this.list=[]
                this.copyList=[]
            } else if(flag== 'done'){
                this.list=this.copyList.filter(v=>v.state == true)
            }else if(flag== 'undo'){
                this.list=this.copyList.filter(v=>v.state == false)
            }else if(flag =='all'){
                this.list=this.copyList
            }
        },
    },
    computed:{
        formatDate(){
            let month = this.now.getMonth() + 1
            return this.now.getFullYear() + '-' + month +'-'+ this.now.getDate()
        }
    },
}
</script>
<style>
#app{
    width: 800px;
    margin: auto;
}
</style>